<template>
  <div :xl="6" :lg="7" class="bg-login">
    <!--标题-->
    <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
      <el-col :span="6"></el-col>
      <el-col :span="6">
        <!--标题-->
        <h1 class="title">管理系统登录</h1>
      </el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--form表单-->
    <el-row type="flex" class="row-bg card" justify="center" align="bottom">
      <el-col :span="7" class="login-card">
        <!--loginForm-->
        <el-form
          :model="loginForm"
          :rules="rules"
          ref="loginForm"
          label-width="21%"
          class="loginForm"
        >
          <el-form-item label="账户" prop="username" style="width: 380px">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" style="width: 380px">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="记住密码" prop="remember">
            <el-switch v-model="loginForm.remember"></el-switch>
          </el-form-item>
          <el-form-item class="btn-ground">
            <el-button type="primary" @click="submitForm('loginForm')"
              >立即登陆</el-button
            >
            <el-button @click="resetForm('loginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 表单信息
      loginForm: {
        // 账户数据
        username: "",
        // 密码数据
        password: "",
        // 记住密码
        remember: false,
        // 验证码的key，因为前后端分离，这里验证码不能由后台存入session，所以交给vue状态管理
        codeToken: "",
      },
      // 表单验证
      rules: {
        // 设置账户效验规则
        username: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符的账户",
            trigger: "blur",
          },
        ],
        // 设置密码效验规则
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 15,
            message: "长度在 6 到 15 个字符的密码",
            trigger: "blur",
          },
        ],
      },
      // 绑定验证码图片
      codeImg: null,
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return;
        // 调用get请求
        const { data: res } = await this.$http.post("login", this.loginForm);
        if (res == "success" ) {
           this.$message.success("登陆成功！！！");
           this.$router.push({ path: "/manage"});// 路由
         }else{
          this.$message.error("用户名或者密码错误");
         }
          
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.bg-login {
  width: 1400px;
  height: 640px;
  background-image: url("../assets/bj.png");
  background-size: 200%;
}

.btn-ground {
  text-align: center;
}

.title {
  text-shadow: -3px 3px 1px #f0e3ee;
  text-align: center;
  padding-top: 30%;
  color: #41b9a6;
  font-size: 40px;
}

.login-card {
  background-color: #a6c9e9;
  opacity: 0.8;
  box-shadow: 0 0 20px #1a1818;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
}
</style>
